---
title: "Slider"
description: An interactive control that lets users select a value from a range by dragging a handle horizontally or vertically.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Slider.html#props"]
---

## Slider
A slider is a horizontal bar that you can drag left or right to select a value within a range, similar to adjusting volume.
<How minW60 toUse="controls/slider/slider-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/slider
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components tailwind-merge
```

<SourceCode toShow='slider'/>

## Step
Set a step value on the slider, and it will increment or decrement by that fixed amount each time you adjust it.
<How minW60 toUse="controls/slider/slider-step-demo" />

## Range
By passing an array to the `defaultValue` or `value` props, you can create a range slider.
<How minW60 toUse="controls/slider/slider-range-demo" />

## Orientation
You can change the orientation of the slider to vertical.
<How minW60 toUse="controls/slider/slider-orientation-demo" />

## Suffix and prefix
Sometimes you need to add a prefix or suffix to the slider, like a volume icon.
<How minW60 toUse="controls/slider/slider-prefix-suffix-demo" />

## Description
Add a description to the slider.
<How minW60 toUse="controls/slider/slider-description-demo" />

## Controlled
You can control the slider's value by using the `value` prop.
<How minW60 toUse="controls/slider/slider-controlled-demo" />

## Disabled
When the slider is disabled, it appears grayed out and becomes non-interactive.
<How minW60 toUse="controls/slider/slider-disabled-demo" />
